/**
 * @date 2022/4/2
 * @description vuex 主题全局配置setting.js模块
 * @author 
 */
import { themeConfig } from '@/config/theme'
const { mode, theme, fixedHead, fullScreen, refresh, collapse, notice, isBreadcrumb, isLogo, tag } = themeConfig

const state = {
    routerView: true, // 是否显示路由
    isMobile: false, // 是否为移动端
    collapse, //是否展开菜单
    isFullScreen: false, // 是否显示全屏
    isDrawer: false, // 是否展开移动端菜单
    theme,
    isLogo,
    fixedHead,
    tag,
    isBreadcrumb,
    fullScreen,
    routerCutLevel: 2, //组件路由切换
}

const actions = {
    /**
     * @description 是否为移动端
     *  @param {boolean} flag true|false
     */
    changeMobile: ({ commit }, flag) => {
        commit('CHANGE_IS_MOBILE', flag)
    },
    /**
     * @description 切换菜单展开收起
     */
    changeCollapse: ({ commit }) => {
        commit('CHANGE_COLLAPSE')
    },
    /**
     * @description 设置主题
     * @param {strinng} theme 系统默认：blue|green|red|default
     */
    setTheme: ({ commit }, theme) => {
        commit('SET_THEME', theme)
    },
    /**
     * @description 是否显示标签
     * @param {boolean} flag true|false
     */
    setTag: ({ commit }, flag) => {
        commit('CHANGE_TAG', flag)
    },
    /**
     * @description 切换是否全屏
     *  @param {boolean} flag true|false
     */
    changeFullScreen: ({ commit }, flag) => {
        commit('CHANGE_FULL_SCREEN', flag)
    },
    /**
     * @description 是否刷新路由
     *  @param {boolean} flag true|false
     */
    setRouterView: ({ commit }, flag) => {
        commit('SET_ROUTER_VIEW', flag)
    },
    /**
     * @description 是否展开移动端菜单
     *  @param {boolean} flag true|false
     */
    changeDrawer: ({ commit }, flag) => {
        commit('CHANGE_IS_DRAWER', flag)
    },
    /**
     * @description 是否进行组件路由切换
     *  @param {boolean} level
     */
    setRouterCut: ({ commit }, level) => {
        commit('SET_ROUTER_CUT', level)
    },
}

const mutations = {
    CHANGE_IS_MOBILE: (state, flag) => {
        state.isMobile = flag
    },
    CHANGE_COLLAPSE: (state) => {
        state.collapse = !state.collapse
    },
    SET_THEME: (state, theme) => {
        state.theme = theme
    },
    CHANGE_TAG: (state, flag) => {
        state.tag = flag
    },
    CHANGE_BREADCRUMB: (state, flag) => {
        state.isBreadcrumb = flag
    },
    CHANGE_FULL_SCREEN: (state, flag) => {
        state.isFullScreen = flag
    },
    SET_ROUTER_VIEW: (state) => {
        state.routerView = !state.routerView
    },
    CHANGE_IS_DRAWER: (state, flag) => {
        state.isDrawer = flag
    },
    SET_ROUTER_CUT: (state, level) => {
        state.routerCutLevel = level
    },
}

const getters = {
    isMobile: (state) => state.isMobile,
    theme: (state) => state.theme,
    isLogo: (state) => state.isLogo,
    fixedHead: (state) => state.fixedHead,
    tag: (state) => state.tag,
    isBreadcrumb: (state) => state.isBreadcrumb,
    isFullScreen: (state) => state.isFullScreen,
    fullScreen: (state) => state.fullScreen,
    routerView: (state) => state.routerView,
    isDrawer: (state) => state.isDrawer,
    routerCutLevel: (state) => state.routerCutLevel,
}

export default {
    getters,
    state,
    mutations,
    actions,
}